<template>
  <div class="ring"></div>
</template>

<script>
import * as echarts from "echarts"; // eslint-disable-line no-unused-vars
export default {
  name: "",
  props: {
    data: Object,
  },
  data() {
    return {};
  },
  methods: {
    setChart() {
      let bgColor = "#fff"; // eslint-disable-line no-unused-vars
      let fontColor = "#fff"; // eslint-disable-line no-unused-vars
      let titleColor = "#fff"; // eslint-disable-line no-unused-vars
      let scale = 1; // eslint-disable-line no-unused-vars
      let title = this.data.title;
      let total = this.data.series.reduce((a, b) => {
        // eslint-disable-line no-unused-vars
        return a + b.value * 1;
      }, 0);

      let option = {
        color: [
          "#1890FF",
          "#12DDA1",
          "#F78048",
          "#FFB026",
          "rgba(255,255,255,.5)",
        ],
        legend: {
          selectedMode: false,
          orient: "vertical",
          itemWidth: 8,
          itemHeight: 8,
          icon: "circle",
          right: "190",
          top: "center",
          textStyle: { fontSize: 12, color: "#FFF" },
        },
        tooltip: {
          trigger: "item",
          padding: [0, 0, 0, 0],
          backgroundColor: "rgba(11, 41, 116, 0.2)",
          borderColor: "rgba(11, 41, 116, 0.2)",
          textStyle: {
            color: "#D6E1FF",
          },
          formatter: "{b} :<br/> {d}%",
        },
        title: {
          text: title + "\n\n" + total + "元",
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
          subtextStyle: {
            fontSize: 32,
            color: "#fff",
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["36%", "66%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                position: "inner",
                color: "#fff",
                fontStyle: "normal",
                fontWeight: "normal",
                fontFamily: "sans-serif",
                fontSize: 10,
                formatter: (params) => {
                  return `${params.percent}%`;
                },
              },
            },
            labelLine: {
              show: true,
              // length: 6,
              // length2: 15
            },
            data: this.data.series,
          },
          {
            type: "pie",
            radius: ["36%", "43%"],
            center: ["50%", "50%"],
            silent: true,
            data: [
              {
                name: "",
                value: 1,
              },
            ],
          },
        ],
      };

      let myChart = this.$echarts(this.$el);
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.setChart();
    console.log(this.data);
  },
};
</script>

<style lang="less" scoped>
.ring {
  width: 150%;
  height: 120%;
  margin-top: -8%;
  margin-left: -30%;
}
</style>
